<template>
  <div>
    <div style="margin-bottom: 10px;overflow: hidden">
      <div style="float: left;">
        <Button type="success" icon="person-add" @click.native="handleAddOrUpdate()">新建</Button>
        <Button type="warning" icon="trash-a" @click.native="handleDelete()" :disabled="dataListSelections.length <= 0">
          批量删除
        </Button>
      </div>
      <div style="float: right;">
        <Row>
          <Input v-model="dataForm.key" icon="ios-search" placeholder="请输入参数名搜索..." style="width: 200px" clearable/>
          <span @click="getDataList" style="margin: 0 10px;"><Button type="primary" icon="search">搜索</Button></span>
        </Row>
      </div>
    </div>
    <Table border
           size="small"
           ref="selection"
           :columns="columns"
           :data="dataList"
           :loading="dataListLoading"
           @on-selection-change="handleSelectionChange"
           @on-row-click="handleSelectOne"
           stripe></Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page
          :total="totalPage"
          size="small"
          :page-size="pageSize"
          :page-size-opts="[10,20,30,50,100]"
          :current="pageIndex"
          @on-change="handleCurrentChange"
          @on-page-size-change="handleSizeChange"
          show-elevator
          show-sizer
          show-total></Page>
      </div>
    </div>
    <add-or-update v-if="addOrUpdateVisiable"
                   ref="addOrUpdate"
                   @refreshDataList="getDataList"
    >
    </add-or-update>
    <!--</Modal>-->
  </div>
</template>
<script>
import AddOrUpdate from './schedulejob-add-or-update';
// import util from '@/libs/util';
export default {
  data () {
    return {
      /* 查询项 */
      dataForm: {
        key: ''
      },
      // 数据列表
      dataList: [],
      // 当前页
      pageIndex: 1,
      // 每页数据条数
      pageSize: 10,
      // 总页数
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisiable: false,
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          type: 'index',
          title: '序号',
          width: 65,
          align: 'center'
        },
        // start
        {
          title: '任务id',
          key: 'jobId'
        },
        {
          title: 'bean名称',
          key: 'beanName'
        },
        {
          title: '方法名',
          key: 'methodName'
        },
        {
          title: '参数',
          key: 'params'
        },
        {
          title: 'cron表达式',
          key: 'cronExpression'
        },
        {
          title: '任务状态',
          key: 'status',
          render: (h, params) => {
            const row = params.row;
            const color = row.status === 0 ? 'green' : 'red';
            const text = row.status === 0 ? '正常' : '暂停';
            return h('Tag', {
              props: {
                type: 'border',
                color: color
              }
            }, text);
          }
        },
        {
          title: '备注',
          key: 'remark'
        },
        {
          title: '操作',
          key: 'action',
          align: 'left',
          render: (h, params) => {
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  content: '修改'
                }
              }, [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small',
                    disabled: false
                  },
                  style: {
                    // color: '#00bcd4',
                    marginRight: '2px'
                  },
                  on: {
                    click: (e) => {
                      this.handleAddOrUpdate(params.row.jobId);
                      // js原生阻止事件冒泡
                      e.stopPropagation();
                    }
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'compose',
                      size: '15'
                    }
                  })
                ])
              ]),
              h('Tooltip', {
                props: {
                  placement: 'top',
                  content: '删除'
                }
              }, [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small',
                    disabled: false
                  },
                  style: {
                    marginRight: '2px'
                  },
                  on: {
                    click: (e) => {
                      this.handleDelete(params.row.jobId);
                      // js原生阻止事件冒泡
                      e.stopPropagation();
                    }
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'trash-a',
                      size: '15'
                    }
                  })
                ])
              ]),
              h('Tooltip', {
                props: {
                  placement: 'top',
                  content: '开始/恢复'
                }
              }, [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small',
                    disabled: false
                  },
                  on: {
                    click: (e) => {
                      this.handleResume(params.row.jobId);
                      // js原生阻止事件冒泡
                      e.stopPropagation();
                    }
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'play',
                      size: '15'
                    }
                  })
                ])
              ]),
              h('Tooltip', {
                props: {
                  placement: 'top',
                  content: '暂停'
                }
              }, [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small',
                    disabled: false
                  },
                  on: {
                    click: (e) => {
                      this.handlePause(params.row.jobId);
                      // js原生阻止事件冒泡
                      e.stopPropagation();
                    }
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'pause',
                      size: '15'
                    }
                  })
                ])
              ]),
              h('Tooltip', {
                props: {
                  placement: 'top',
                  content: '立即执行(任务只执行一次)'
                }
              }, [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small',
                    disabled: false
                  },
                  on: {
                    click: (e) => {
                      this.handleRun(params.row.jobId);
                      // js原生阻止事件冒泡
                      e.stopPropagation();
                    }
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'eject',
                      size: '15'
                    }
                  })
                ])
              ])
            ]);
          }
        }
        // end
      ]
    }
  },
  components: {
    AddOrUpdate
  },
  created () {
    this.getDataList();
  },
  activated () {
    /* todo:不执行，原理暂不清楚
    */
    this.getDataList();
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true;
      let param = {
        'page': this.pageIndex,
        'limit': this.pageSize,
        'key': this.dataForm.key
      };
      let url = '/sys/schedule/list';
      this.$http({
        url: this.$http.adornUrl(url),
        method: 'get',
        params: this.$http.adornParams(param)
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      })
    },
    // 每页显示数据条数变化
    handleSizeChange (val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页码变化
    handleCurrentChange (val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    handleSelectionChange (val) {
      this.dataListSelections = val;
    },
    // 单选（点击行选中）
    handleSelectOne (val, index) {
      this.$refs.selection.toggleSelect(index);
    },
    // 新增、修改弹窗
    handleAddOrUpdate (id) {
      /* */
      this.addOrUpdateVisiable = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 新增修改提交
    /* handleSubmit () {
         //this.$refs.addOrUpdate.handleSubmit();
    }, */
    // 删除
    handleDelete (id) {
      let ids = id ? [id] : this.dataListSelections.map(item => {
        return item.jobId;
      });
      this.dataListLoading = true;
      let url = '/sys/schedule/delete';
      this.$Modal.confirm({
        title: '删除操作',
        content: `确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`,
        onOk: () => {
          this.$http({
            url: this.$http.adornUrl(url),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$Message.info({
                content: '操作成功',
                onClose: () => {
                  this.dataListSelections.length = 0;
                  this.getDataList();
                  this.dataListLoading = false;
                }
              });
            } else {
              this.$Message.error(data.msg);
            }
          })
        },
        onCancel: () => {
          /* 取消回调 */
          this.dataListLoading = false;
        }
      });
    },
    handleRun (id) {
      let ids = id ? [id] : this.dataListSelections.map(item => {
        return item.jobId;
      });
      this.dataListLoading = true;
      let url = '/sys/schedule/run';
      this.$Modal.confirm({
        title: '立即执行操作',
        content: `确定对[id=${ids.join(',')}]进行[${id ? '开始' : '批量开始'}]操作?`,
        onOk: () => {
          this.$http({
            url: this.$http.adornUrl(url),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$Message.info({
                content: '操作成功',
                onClose: () => {
                  this.dataListSelections.length = 0;
                  this.getDataList();
                  this.dataListLoading = false;
                }
              });
            } else {
              this.$Message.error(data.msg);
            }
          })
        },
        onCancel: () => {
          /* 取消回调 */
          this.dataListLoading = false;
        }
      });
    },
    handlePause (id) {
      /**/
      let ids = id ? [id] : this.dataListSelections.map(item => {
        return item.jobId;
      });
      this.dataListLoading = true;
      let url = '/sys/schedule/pause';
      this.$Modal.confirm({
        title: '暂停操作',
        content: `确定对[id=${ids.join(',')}]进行[${id ? '开始' : '批量暂停'}]操作?`,
        onOk: () => {
          this.$http({
            url: this.$http.adornUrl(url),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$Message.info({
                content: '操作成功',
                onClose: () => {
                  this.dataListSelections.length = 0;
                  this.getDataList();
                  this.dataListLoading = false;
                }
              });
            } else {
              this.$Message.error(data.msg);
            }
          })
        },
        onCancel: () => {
          /* 取消回调 */
          this.dataListLoading = false;
        }
      });
    },
    handleResume (id) {
      /**/
      let ids = id ? [id] : this.dataListSelections.map(item => {
        return item.jobId;
      });
      this.dataListLoading = true;
      let url = '/sys/schedule/resume';
      this.$Modal.confirm({
        title: '恢复操作',
        content: `确定对[id=${ids.join(',')}]进行[${id ? '开始' : '批量恢复'}]操作?`,
        onOk: () => {
          this.$http({
            url: this.$http.adornUrl(url),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$Message.info({
                content: '操作成功',
                onClose: () => {
                  this.dataListSelections.length = 0;
                  this.getDataList();
                  this.dataListLoading = false;
                }
              });
            } else {
              this.$Message.error(data.msg);
            }
          })
        },
        onCancel: () => {
          /* 取消回调 */
          this.dataListLoading = false;
        }
      });
    }
    // 导出
  }
}
</script>
